import React from 'react'
// import axios from 'axios'
import http from '../../../util/http'
import {observer, inject} from "mobx-react";
import * as url from '../../../util/api'
import {Row, Col, Menu, Dropdown, Checkbox, Drawer, DatePicker, Input, Button, Table, Tooltip, Select,} from 'antd';
import {
    DownOutlined,
    EllipsisOutlined,
    SlidersOutlined,
    SafetyCertificateFilled,
    FileTextFilled,
    CopyFilled,
    PlusOutlined,
} from '@ant-design/icons';
import {Link} from 'react-router-dom';
import './PurchaseOrder.css'

const {Option} = Select;
const {Search} = Input;
const {RangePicker} = DatePicker;
let tableDataTest = [
    {
        key: 0,

        orderNo: 'DH-O-20200404-2643',
        orderNumber: 'DH-O-20200404-2643',
        orderMainId: 'DH-O-20200404-2643',
        orderTime: '2020-04-03 11:33',
        customerName: '欧尚超市',
        money: 2000,
        outOfStock: '备货中/待发货',
        state: '待订单审核',
        moneyState: '未收款',
    },
    {
        key: 1,
        orderNo: 'DH-O-20200405-2643',
        orderNumber: 'DH-O-20200404-2643',
        orderMainId: 'DH-O-20200404-2643',
        orderTime: '2020-04-03 11:33',
        customerName: '欧尚超市',
        money: 2000,
        outOfStock: '备货中/待发货',
        state: '待订单审核',
        moneyState: '未收款',
    },
    {
        key: 2,
        orderNo: 'DH-O-20200404-2643',
        orderNumber: 'DH-O-20200404-2643',
        orderMainId: 'DH-O-20200404-2643',
        orderTime: '2020-04-03 11:33',
        customerName: '欧尚超市',
        money: 2000,
        outOfStock: '备货中/待发货',
        state: '待订单审核',
        moneyState: '未收款',
    },
    {
        key: 3,
        orderNo: 'DH-O-20200404-2643',
        orderNumber: 'DH-O-20200404-2643',
        orderMainId: 'DH-O-20200404-2643',
        orderTime: '2020-04-03 11:33',
        customerName: '欧尚超市',
        money: 2000,
        outOfStock: '备货中/待发货',
        state: '待订单审核',
        moneyState: '未收款',
    },
    {
        key: 4,
        orderNo: 'DH-O-20200404-2643',
        orderNumber: 'DH-O-20200404-2643',
        orderMainId: 'DH-O-20200404-2643',
        orderTime: '2020-04-03 11:33',
        customerName: '欧尚超市',
        money: 2000,
        outOfStock: '备货中/待发货',
        state: '待订单审核',
        moneyState: '未收款',
    },
    {
        key: 5,
        orderNo: 'DH-O-20200404-2643',
        orderNumber: 'DH-O-20200404-2643',
        orderMainId: 'DH-O-20200404-2643',
        orderTime: '2020-04-02 11:33',
        customerName: '欧尚超市',
        money: 2000,
        outOfStock: '备货中/待发货',
        state: '待订单审核',
        moneyState: '未收款',
    },
    {
        key: 6,
        orderNo: 'DH-O-20200407-2643',
        orderNumber: 'DH-O-20200404-2643',
        orderMainId: 'DH-O-20200404-2643',
        orderTime: '2020-04-03 11:33',
        customerName: '欧尚超市',
        money: 2000,
        outOfStock: '备货中/待发货',
        state: '待订单审核',
        moneyState: '未收款',
    },
    {
        key: 7,
        orderNo: 'DH-O-20200404-2643',
        orderNumber: 'DH-O-20200404-2643',
        orderMainId: 'DH-O-20200404-2643',
        orderTime: '2020-04-03 11:33',
        customerName: '伊藤洋华堂',
        money: 2000,
        outOfStock: '备货中/待发货',
        state: '待订单审核',
        moneyState: '未收款',
    },


];

function onChange(value, dateString) {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
}

function onOk(value) {
    console.log('onOk: ', value);
}

const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
    }),
};

@inject('orderStore')
@observer
class PurchaseOrder extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            orderTypeText: '全部订单',
            perSize: 5,
            currentPage: 1,
            countPage:'',
            total:'',
            tableData: [],
            drawerVisible: false,
            searchValue:'',

        }
        this.handleChange.bind(this)
        console.log('constructor');

    }

    handleChange(value, e) {
        console.log(value);
        console.log(e);
        this.setState({
            orderTypeText: e.children,
        })
    }

    handleMenuClick = (e) => {
        console.log('click', e);
      if (e.key === "item_0") {
          this.props.orderStore.setData('menuType',0)
      }else if (e.key === "item_2") {
          this.props.orderStore.setData('menuType',2)

      }

    }

    componentWillMount() {
        console.log('componentWillMount');
    }

    getOrderData = (currentPage,perSize) => {

        let obj = {perSize: perSize, currentPage: currentPage}
        http({
            url: url.orderQueryOrder,
            method: 'post',
            data: obj,

        }).then(resp => {
            console.log(resp);
            console.log(typeof (resp.data.data));
            if (typeof (resp.data.data) === 'object' && resp.data.data.constructor === Array) {
                console.log('array');
                this.orderDataExchange(resp.data.data)
                data = (resp.data.data);

            } else if (typeof (resp.data.data) === 'object') {
                var data = []
                Object.assign(resp.data.data, {key: 0})
                data.push(resp.data.data)
            }
            this.setState({
                tableData: data
            })
        }).catch(err => {
            console.log(err);
        })
    }
    getOrderCount = () => {

        http({
            url: url.totalCountForOrder,
            method: 'post',

        }).then(resp => {
            console.log(resp);
            let countPage=Math.ceil(resp.data.data.totalCounts/this.state.perSize)
            this.setState({
                countPage: countPage,
                total:resp.data.data.totalCounts,
            })
        }).catch(err => {
            console.log(err);
        })
    }
    componentDidMount() {
        console.log('componentDidMount');
        this.getOrderCount();
        this.getOrderData(this.state.currentPage,this.state.perSize);
    }

    showDrawer = () => {
        this.setState({
            drawerVisible: true,
        });
    };
    orderDataExchange = (data) => {
        data.map(item => {
            item.clientId = '憨宝集团'
            let myOrderAuditStatus = ''

            switch (item.orderAuditStatus) {
                case 0:
                    myOrderAuditStatus = '待订单审核';
                    break;
                case 1:
                    myOrderAuditStatus = '待财务审核';
                    break;
                case 2:
                    myOrderAuditStatus = '待出库审核';
                    break;
                case 3:
                    myOrderAuditStatus = '待发货确认';
                    break;
                case 4:
                    myOrderAuditStatus = '待收货确认';
                    break;
                case 5:
                    myOrderAuditStatus = '退单审核';
                    break;
            }
            Object.assign(item, {myOrderAuditStatus: myOrderAuditStatus})
            Object.assign(item, {key: item.orderMainId})
            item.out === 0 ? item.out = '备货中' : item.out = '已出库'
            item.receipt === 0 ? item.receipt = '待发货' : item.receipt = '已发货'
            switch (item.collectStatus) {
                case 0:
                    item.collectStatus = '未收款';
                    break;
                case 1:
                    item.collectStatus = '待审核';
                    break;
                case 2:
                    item.collectStatus = '已收款';
                    break;
            }


        })
    }
    onClose = () => {
        this.setState({
            drawerVisible: false,
        });
    };

    componentWillUnmount() {
        console.log('componentWillUnmount');

    }
    setSearchInputValue=(e)=>{
        console.log(e.target.value);
        this.setState({
            searchValue:e.target.value,
        })
    }
    changePage=(current, size)=>{
        console.log(current, size);
        this.setState({
            currentPage:current,
        })
        this.getOrderData(current,size)

    }
    setActionMenu=(orderAuditStatus)=>{
       return (
            <Menu onClick={e=>this.handleMenuClick(e)}>
                <Menu.Item className={orderAuditStatus===4||orderAuditStatus===5?'displayNone':''}>
                    <Link to={'/homepage/purchaseOrderDetail'}><SafetyCertificateFilled/> 审核</Link>
                </Menu.Item>
                <Menu.Item>
                    <Link to={'/purchaseOrderCopy'}><CopyFilled/> 复制</Link>
                </Menu.Item>
                <Menu.Item>
                    <Link to={{
                        pathname: '/homepage/purchaseOrderDetail',
                        state: 1
                    }}><FileTextFilled/> 订单详情</Link>
                </Menu.Item>
                <Menu.Item>
                    <Link to={'/addGetMoneyRecord'}><PlusOutlined/> 添加收款记录</Link>
                </Menu.Item>
            </Menu>
        );
    }
    render() {
        const {xScroll, yScroll, orderTypeText, tableData, ...state} = this.state;


        const columns = [
            {
                title: '订单号',
                dataIndex: 'orderNumber',
                className: 'tableCol',

            },
            {
                title: '下单时间',
                dataIndex: 'orderTime',
                sorter: (a, b) => a.age - b.age,
            },
            {
                title: '客户名称',
                dataIndex: 'clientId',
                className: 'tableCol',
                sorter: (a, b) => a.age - b.age,

            },
            {
                title: '金额',
                dataIndex: 'orderMainPrice',
            },
            {
                title: '出库/发货',
                render: (text, record) => (

                    <span>
                        {record.out}/{record.receipt}
                    </span>
                ) ,
            },
            {
                title: '状态',
                dataIndex: 'myOrderAuditStatus',
                className: 'statusClass',

            },
            {
                title: '收款状态',
                dataIndex: 'collectStatus',
                className: 'statusClass',
            },
            {
                title: <SlidersOutlined onClick={this.showDrawer} className={'slider'}/>,
                key: 'action',
                align: 'right',
                render: (text, record, index) => (
                    // console.log(text, record, index)
                    <span>
        <span style={{marginRight: 16}}>
            <Dropdown overlay={this.setActionMenu(record.orderAuditStatus)} placement="bottomRight">
                {<EllipsisOutlined className={'tableItemAction'}/>}
    </Dropdown>
           </span>
      </span>
                ),
            },
        ];
        const outMenu = (
            <Menu>
                <Menu.Item>
                    <a target="" rel="noopener noreferrer" href='true' onClick={e => e.preventDefault()}>
                        导出订单列表
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a target="" rel="noopener noreferrer" href='true' onClick={e => e.preventDefault()}>
                        导出订单默认模板
                    </a>
                </Menu.Item>
            </Menu>
        );
        const scroll = {};
        if (yScroll) {
            scroll.y = 240;
        }
        if (xScroll) {
            scroll.x = '100vw';
        }

        const tableColumns = columns.map(item => ({...item, ellipsis: state.ellipsis}));
        if (xScroll === 'fixed') {
            tableColumns[0].fixed = true;
            tableColumns[tableColumns.length - 1].fixed = 'right';
        }
        return (
            <div style={{padding: 10}} className={this.state.drawerVisible ? 'grayBackg' : ''}>
                <Row align='middle'>
                    <Col span={3} style={{paddingRight: '1rem'}}>
                        <Tooltip placement="bottomRight" title={orderTypeText} mouseLeaveDelay='0' mouseEnterDelay='.5'>
                            <Select bordered={false} defaultValue="0" style={{width: '100%'}}
                                    onChange={(value, e) => this.handleChange(value, e)}>
                                <Option value="0">全部订单</Option>
                                <Option value="1">待处理订单</Option>
                                <Option value="2">未完成订单</Option>
                                <Option value="3">已完成订单</Option>
                                <Option value="4">已作废订单</Option>
                            </Select>
                        </Tooltip>

                    </Col>
                    <Col span={6}>
                        <RangePicker
                            showTime={{format: 'HH:mm'}}
                            format="YYYY-MM-DD HH:mm"
                            onChange={onChange}
                            placeholder={['起始时间', '结束时间']}
                            onOk={onOk}
                        />
                    </Col>
                    <Col span={6} style={{paddingLeft: 10}}>
                        <Search placeholder="请输入订单号/客户名称"  onChange={this.setSearchInputValue} onSearch={value => console.log(value)}/>
                    </Col>
                    <Col span={6} offset={3} align='right' className={'oDropDown'}>
                        <Dropdown overlay={outMenu} className='dropdownItem '>
                            <Button>
                                导出 <DownOutlined/>
                            </Button>
                        </Dropdown>

                        <Button className='dropdownItem'
                                style={{marginLeft: 20, width: 80, borderRadius: 4}}>导入</Button>
                        <Button style={{
                            marginLeft: 20,
                            width: 80,
                            borderRadius: 4,
                            backgroundColor: '#12C09F',
                            color: 'white'
                        }}><Link to={'/homepage/addNewPurchaseOrder'}>新增</Link></Button>
                    </Col>

                </Row>
                <Row style={{marginTop: 10}} className={'site-drawer-render-in-current-wrapper'}>

                    <Table
                        rowSelection={{
                            ...rowSelection,
                        }}
                        pagination={{position: ['none', 'bottomRight'], pageSize:this.state.perSize,
                            current:this.state.currentPage,
                            total:this.state.total,onChange:this.changePage}}
                        columns={columns}
                        dataSource={tableData}
                        className='table'

                        onRow={(record) => {
                            return {
                                onClick: () => {
                                    console.log(record)
                                    this.props.orderStore.setData('orderMainId', record.orderMainId);
                                    this.props.orderStore.setData('orderAuditStatus',record.orderAuditStatus)
                                }
                            }
                        }
                        }
                    />
                    <Drawer
                        className={'orderDrawer'}
                        title="选择显示字段"
                        placement="right"
                        closable={false}
                        onClose={this.onClose}
                        visible={this.state.drawerVisible}
                        getContainer={false}
                        style={{position: 'absolute'}}
                    >
                        <Row className={'drawerRow'}>

                            <Checkbox>订单号</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>下单时间</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>客户等级</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>经销商名称</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>经销商编码</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>物流编码</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>金额</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>出库/发货</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>状态</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>收款状态</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>备注</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>发票类型</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>交货日期</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>收货人</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>联系方式</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>收货地址</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>业务员</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>制单人</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>默认发货仓库</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>打印状态</Checkbox>
                        </Row>
                        <Row className={'drawerRow'}>

                            <Checkbox>数量合计</Checkbox>
                        </Row>
                    </Drawer>
                </Row>
            </div>
        )
    }
}

export default PurchaseOrder